<template>
  <PageContainer>
    <view class="container">
      <Tabs v-model="currentTab" :data="dataList">
        <Header title="活动管理" :is-box-shadow="false">
          <view class="tips">
            <text class="ali-icon icon-tips" style="font-size: 32rpx"></text>
            <text class="tip-text">编辑修改活动请前往PC后台操作</text>
          </view>
          <view style="padding: 16rpx 32rpx; height: 72rpx">
            <TSearch placeholder="请输入搜索内容" @confirm="searchFnc" />
          </view>
          <TabNav tabBarColor="#2878FF" />
        </Header>
        <template>
          <TabsItem name="全部活动" :value="0"></TabsItem>
          <TabsItem name="进行中" :value="1"></TabsItem>
          <TabsItem name="已结束" :value="2"></TabsItem>
        </template>
      </Tabs>
      <Paglist
        v-model="dataList"
        :is-init-api="true"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
        :is-show-loadmore="dataList.length >= 1"
      >
        <template v-for="v in dataList" :key="v.id">
          <view class="activity-item">
            <ManageActivityItem
              import-type="manage"
              :item="v"
              @refresh="upload"
              @manage="handleManage(v)"
            />
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* activityManage 活动管理 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import type { IActivityListResData } from '@/api/activity/types';
  import { navigateTo, onLoad } from '@/router';
  import { reactive, ref, provide, watch } from 'vue';
  import Header from '@/components/Header/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { activityManagePageList } from '@/api/activity';
  import ManageActivityItem from './components/ManageActivityMain/ManageActivityItem.vue';
  import { ActivityStatusEnum, PublishStatusEnum } from '@/enums/activityStatusEnum';
  import TSearch from '@/components/TSearch/index.vue';
  import type { FunctionArgs } from '@vueuse/core';
  import { onPageScroll } from '@dcloudio/uni-app';

  let success: FunctionArgs | null = null;
  onLoad<'activitManage'>(async (op) => {
    success = op.success;
  });

  const emit = defineEmits(['refresh', 'manage', 'share', 'arrange', 'certificate']);
  provide('api', async (obj: any) => {
    const res = await activityManagePageList(obj);
    return res;
  });

  const currentTab = ref(0);

  const dataList = ref<IActivityListResData[]>([]);
  const status = reactive([
    [],
    [
      ActivityStatusEnum.REGISTRATION_UNPLAYED,
      ActivityStatusEnum.REGISTRATION_UNDERWAY,
      ActivityStatusEnum.REGISTRATION_END,
      ActivityStatusEnum.START,
    ],
    [ActivityStatusEnum.END, ActivityStatusEnum.CANCEL],
  ]);

  const parame = reactive({
    activityStatuss: status[0],
    title: '',
    myActivity: undefined,
    publishStatus: undefined as unknown as PublishStatusEnum | undefined,
  });
  const [register, { refresh }] = useConList();

  const upload = () => refresh();

  watch(currentTab, tabsChange);
  function tabsChange(index: number) {
    currentTab.value = index;
    parame.activityStatuss = status[index];
    if (index === 1) parame.publishStatus = PublishStatusEnum.YES_PUBLISH;
    else parame.publishStatus = undefined;
    refresh && refresh();
  }

  function searchFnc(keyword: string) {
    parame.title = keyword;
    refresh && refresh();
  }

  const handleManage = (item: IActivityListResData) => {
    navigateTo({
      name: 'activityPersonManage',
      options: {
        activityId: item.id,
        success: () => {
          refresh?.();
          success?.();
        },
      },
    });
  };

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .container {
    .tips {
      background-color: #fff4e7;
      display: flex;
      align-items: center;
      gap: 16rpx;
      padding: 20rpx 32rpx;
      color: #e29942;
      .tip-text {
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
    .activity-item {
      padding: 0 30rpx;
      margin-bottom: 30rpx;
      &:nth-child(1) {
        padding-top: 30rpx;
      }
    }
  }
</style>
